/**
 *  Copyright � 2010 Digia Plc
 *  Copyright � 2010 Nokia Corporation
 *
 *  All rights reserved.
 *
 *  Nokia and Nokia Connecting People are registered trademarks of
 *  Nokia Corporation.
 *  Java and all Java-based marks are trademarks or registered
 *  trademarks of
 *  Sun Microsystems, Inc. Other product and company names
 *  mentioned herein may be
 *  trademarks or trade names of their respective owners.
 *
 *
 *  Subject to the conditions below, you may, without charge:
 *
 *  �  Use, copy, modify and/or merge copies of this software and
 *     associated documentation files (the "Software")
 *
 *  �  Publish, distribute, sub-licence and/or sell new software
 *     derived from or incorporating the Software.
 *
 *
 *  This file, unmodified, shall be included with all copies or
 *  substantial portions
 *  of the Software that are distributed in source code form.
 *
 *  The Software cannot constitute the primary value of any new
 *  software derived
 *  from or incorporating the Software.
 *
 *  Any person dealing with the Software shall not misrepresent
 *  the source of the Software.
 *
 *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
 *  KIND, EXPRESS OR IMPLIED,
 *  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 *  MERCHANTABILITY, FITNESS FOR A
 *  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *  AUTHORS OR COPYRIGHT
 *  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 *  WHETHER IN AN ACTION
 *  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 *  CONNECTION WITH THE
 *  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
import Qt 4.7
import "javascript/sql.js" as HCS
import "../colibri"
import "styles"

Item {
    id: screen

    property int colSpacing: 15
    property string room: "room1"
    property real buttonSize: 30
    property CLStyle style: StyleHomeControlSystem {}
    property CLStyle style1: StyleHomeControlSystem {}
    property CLStyle style2: StyleHomeControlSystem2 {}
    property CLStyle style3: StyleHomeControlSystem3 {}
    property CLStyle style4: StyleHomeControlSystem4 {}
    property CLStyle style5: StyleHomeControlSystem5 {}
    property CLStyle style6: StyleHomeControlSystem6 {}
    property bool onStartUp: true
    property string activeCLButton: "button1"

    signal themeChange()

    signal closeWindow()

    function updateInfo() {
        HCS.getTheRoom(screen.room);
        onStartUp = true;
    }

    Component.onCompleted: {
        updateInfo();
        buttonSize = screen.width*0.1
    }

    onHeightChanged:buttonSize = screen.width*0.1
    onWidthChanged:buttonSize = screen.width*0.1

    width: parent.width
    height: parent.height


    Item {
        id: themeWidget
        anchors.horizontalCenter:parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width
        height: parent.height


        Rectangle {
            anchors.fill:parent
            color:style.colorWhenDefault
            visible: if (bgPic.source != "") false
        }

        Rectangle {
            width:themeWidget.width*0.955
            height:themeWidget.height*0.924
            color:style.selectionColor
            anchors.centerIn:parent
            radius:7

        }

        Image {
            id: bgPic
            source: "images/control_bg_trans_420x275_png.png"
            width:themeWidget.width
            height:themeWidget.height
            anchors.centerIn:parent
            opacity:0.7
        }

        Text {
            id: headline
            text: "Themes"
            font.pixelSize: 1 + Math.round( 23 * (screen.height / 424) )
            x: Math.round( screen.width * 0.05 )
            y: Math.round( screen.height * 0.05 )
            color: screen.style.textColor
            font.bold: true
         }

        MouseArea  {
            anchors.fill:parent
        }

        RoomExitButton {
            windowWidth: screen.width
            windowHeight: screen.height
            style: screen.style
            onClicked: screen.closeWindow();
        }

        Column {
            spacing: colSpacing
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            Text {
                text: "Change theme"
                anchors.horizontalCenter:parent.horizontalCenter
                font.bold: true
                color: screen.style.textColor
                font.pixelSize: 20
            }

            Row {
                spacing: colSpacing

                CLButton {
                    id:button1
                    width:buttonSize
                    height:buttonSize
                    gradientWhenDefault:style.gradientBg
                    style:style1
                    text:""
                    borderWidth: (activeCLButton == "button1")?8:1
                    borderColor: (activeCLButton == "button1")?style.textColor:"white"

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style1
                            HCS.setTheme(1)
                            screen.themeChange()
                            activeCLButton = "button1"
                        }

                    }

                }

                CLButton {
                    id:button2
                    width:buttonSize
                    height:buttonSize
                    gradientWhenDefault:style.gradientBg
                    style:style2
                    text:""
                    borderWidth: (activeCLButton == "button2")?8:1
                    borderColor: (activeCLButton == "button2")?style.textColor:"white"

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style2
                            HCS.setTheme(2)
                            screen.themeChange()
                            activeCLButton = "button2"
                        }

                    }
                }

                CLButton {
                    id:button3
                    width:buttonSize
                    height:buttonSize
                    gradientWhenDefault:style.gradientBg
                    style:style3
                    text:""
                    borderWidth: (activeCLButton == "button3")?8:1
                    borderColor: (activeCLButton == "button3")?style.textColor:"white"

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style3
                            HCS.setTheme(3)
                            screen.themeChange()
                            activeCLButton = "button3"
                        }
                    }
                }
            }

            Row {
                spacing: colSpacing

                Rectangle{
                    id:button4
                    border.width:(activeCLButton == "button4")?8:1
                    border.color:(activeCLButton == "button4")?style.textColor:"white"
                    width:buttonSize
                    height:buttonSize
                    color:style4.selectionColor

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style4
                            HCS.setTheme(4)
                            screen.themeChange()
                            activeCLButton = "button4"
                        }
                    }
                }

                Rectangle {
                    id:button5
                    border.width:(activeCLButton == "button5")?8:1
                    border.color:(activeCLButton == "button5")?style.textColor:"white"
                    width:buttonSize
                    height:buttonSize
                    color:style5.selectionColor

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style5
                            HCS.setTheme(5)
                            screen.themeChange()
                            activeCLButton = "button5"
                        }
                    }
                }

                Rectangle {
                    id:button6
                    border.width:(activeCLButton == "button6")?8:1
                    border.color:(activeCLButton == "button6")?style.textColor:"white"
                    width:buttonSize
                    height:buttonSize
                    color:style6.selectionColor

                    MouseArea {
                        anchors.fill:parent
                        onClicked:{
                            style = style6
                            HCS.setTheme(6)
                            screen.themeChange()
                            activeCLButton = "button6"
                        }
                    }
                }
            }
        }
    }
}
